import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PAGE_ELEMENTS, SUPPORTED_PLATFORMS } from '../../../../../../../../types/constants'
import { SoCommonPage } from './common'

export class SoNotFoundPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoNotFoundPage
  protected readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly commonPage: SoCommonPage = SoCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoNotFoundPage {
    if (!SoNotFoundPage.instance) {
      SoNotFoundPage.instance = new SoNotFoundPage()
    }
    return SoNotFoundPage.instance
  }

  init(): void {
  }

  getMainStyles(): string {
    return `
.page-wrap {
  /* 顶部菜单 */
  #header {
    background-color: var(${this.themeVarService.search.header.background}) !important;
    
    .inner {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-direction: column !important;
      background-color: transparent !important;
      border-bottom: none !important;
      
      #g-hd {
        #g-hd-nav {
          ${this.commonPage.tabStyles('g-hd-cur', false)}
        }
      }
      
      .hd-rtools {
        .top-feedback , #g-hd-searchs {
          > a {
            color: var(${this.themeVarService.search.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
        }
      }
    }
  }
  
  /* 主内容 */
  #main {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    .advice {
      p {
        color: var(${this.themeVarService.search.default.text}) !important;
        
        a {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.textHover}) !important;
            text-decoration: none !important;
          }
        }
      }
    }
  }
  
  /* 页脚 */
  ${this.commonPage.footStyles()}
}
    `
  }
}
